<template>
    <div>
        <h2>角色管理</h2>
        <div class="head">
            <div class="my_btn">
                <el-button @click="toAdd" size="small" type="success" class="el-icon-plus">
                    新增
                </el-button>
            </div>
            <div class="search">
                <el-input v-model="searchContent" placeholder="查找...请输入名称" class="input-with-select">
                    <el-button @click="mySearch" slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </div>
        </div>
        <template>
            <el-table
                :data="tableData"
                style="width: 100%"
                >
                <el-table-column
                    prop="id"
                    label="ID"
                    width='100'
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="名称"
                    width='100'
                    align="center"
                >
                </el-table-column>
                <el-table-column
                    prop="value"
                    label="权限值"
                    width='100'
                    align="center"
                >
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope" class="my_do">
                        <el-button type="info"
                            size="mini"
                            class="el-icon-setting"
                            @click="handleEdit(scope.$index, scope.row)">设定</el-button>
                        <el-button type="primary"
                            size="mini"
                            class="el-icon-search"
                            @click="alterName(scope.$index, scope.row)">修改</el-button>
                        <el-button
                            size="mini"
                            class="el-icon-close"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <Pagination @getPagination="getPagination" :total="total" :pageSize="pageSize"></Pagination>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination'
    
    export default {
        name:'Name',
        components: {
            Pagination,
        },
        data() {
            return {
                pageSize:6,
                total:0,
                searchContent:'',
                tableData: [
                    {
                        "id": 1,
                        "roleName": "超级管理员",
                        "value": 100,
                        "createTime": null,
                        "updateTime": null,
                        "isDeleted": null
                    }, 
                ]
                
            }
        },
        created(){
            this.$axios({//查找所有角色
                method:'get',
                url:'/systemManagement/roleCompany/findRoleList',
                params:{
                    currentPage:1,
                    pageSize:6,
                }
            })
            .then(resp=>{
                console.log(resp.data);
                this.total=resp.data.data.total;
                this.tableData=resp.data.data.list;
            })
        },
        methods: {
            toAdd(){
                this.$router.push('/Role/addName')
            },
            handleEdit(index, row) {//进入设定页
                console.log('row',row.roleName);
                this.$router.push({path:'/Role/List',query:{data:row}})
            },
            handleDelete(index, row) {//删除角色
                this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 执行删除
                    this.$axios({
                        method:'post',
                        url:`/systemManagement/roleCompany/delRole?id=${row.id}`,
                        data:{
                            id:row.id,
                        }
                    })
                    .then(resp=>{
                        console.log(resp.data);
                        this.$axios({//删除完后查找所有角色重新渲染页面
                            method:'get',
                            url:'/systemManagement/roleCompany/findRoleList',
                            params:{
                                currentPage:1,
                                pageSize:6,
                            }
                        })
                        .then(resp=>{
                            console.log(resp.data.data);
                            this.total=resp.data.data.total;
                            this.tableData=resp.data.data.list;
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                
            },
            alterName(index,row){
                console.log('index',index);
                console.log('row',row);
                this.$router.push({path:'/Role/NameEdit',query:{name:row.roleName,data:row}})
            },
            mySearch(){//条件查询
                if(this.searchContent==''){//如果值为空显示所有
                    this.$axios({
                        method:'get',
                        url:'/systemManagement/roleCompany/findRoleList',
                        params:{
                            "currentPage":1,//当前页数默认第一页
                            "pageSize":6,//每页显示记录数
                        }
                    })
                    .then(resp=>{
                        console.log(resp.data.data.list);
                        this.total=resp.data.data.total;
                        this.tableData=resp.data.data.list;

                    })
                }else{
                    this.$axios({//根据名字查角色接口
                        method:'get',
                        url:"/systemManagement/roleCompany/findRoleByName",
                        params:{
                            "name":this.searchContent,
                            "currentPage":1,//当前页数默认第一页
                            "pageSize":6,//每页显示记录数
                        }
                    })
                    .then(resp=>{
                        console.log('查询后',resp.data.data.list);
                        this.total=resp.data.data.total;
                        this.tableData=resp.data.data.list
                    })
                }
            },
            //获取点击的页码-------------------------------
            getPagination(page) {
                this.$axios({//查找所有角色
                    method:'get',
                    url:'/systemManagement/roleCompany/findRoleList',
                    params:{
                        currentPage:page,
                        pageSize:6,
                    }
                })
                .then(resp=>{
                    console.log(resp.data.data);
                    this.tableData=resp.data.data.list;
                })
            }
           
        }
    }
</script>

<style lang="less" scoped>
    h2{
        text-align: left;
        margin: 10px;
    }
    .head{
        padding: 5px;
        margin: 5px;
        height: 40px;
        border-top: 5px solid gainsboro;
        border-radius: 5px;
        background-color: white;
    }
    .my_btn{
        float: left;
    }
    .search{
        float: right;
    }
    .my_search{
        padding: 5px;
    }
    .my_do{
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>